<template>
  <div class="app-container" :style="{height:(appMain.height-100)+'px','--theme':theme}">
    <!--向导窗口-->
    <div class="guide-box">
      <!--标题-->
      <div class="content-title">
        <i class="el-icon-milk-tea"></i>
        <span>页面设计向导</span>
      </div>
      <!--菜单设计类型-->
      <div class="body">
        <!--配置页面展示组件-->
        <div class="title-box">
          <div class="item-title">即将开始配置相关业务属性字段:</div>
        </div>
        <div class="create-box">在线创建当前模块业务属性字段、子表、附件上传等。
          <div class="path-box path-input-box">
            <el-button class="btn" type="primary" @click="pageBuild">创建</el-button>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import store from "@/store";
import router from "@/router";
import {GotoYsdMixins} from "@/views/youshuda/utils/GotoYsdMixins";
export default {
  name: "FormBuildGuide",
  mixins:[GotoYsdMixins],
  props:{
    modeConfig:{
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {
    };
  },
  computed:{
    theme(){
      return this.$store.state.settings.theme
    }
  },
  created() {
  },
  methods: {
    /** 页面构建 */
    pageBuild() {
      if(this.modeConfig==null || this.modeConfig==undefined || this.isEmpty(this.modeConfig['tableId'])){
        this.msgError("当前页面配置获取失败，请刷新页面后重试!");
        return ;
      }
      let params={
        "redirect":this.$route.path,
        "levels":this.menuLevels,
        "buildType":'CRUD',
        "formBuildKey":this.modeConfig['formBuildKey']
      }
      this.$tab.openPage("修改[" + this.modeConfig['componentDesc'] + "]生成配置", '/tool/gen-edit/index/' + this.modeConfig['tableId'], params);
    },
  },
};
</script>

<style scoped lang="scss">

.app-container{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

.guide-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #f2f2f2;
  font-size: 16px;
  width: 600px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  margin-bottom: 80px;
}

.guide-box > .content-title > .el-icon-guide{
  font-size: 40px;
}

.guide-box > .content-title {
  background-color: #304156;
  color: white;
  width: 100%;
  padding: 10px;
}

.guide-box > .content-title span {
  margin-left: 6px;
}



.guide-box > .body{
  padding: 30px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.guide-box > .body .create{
  color: var(--theme);
}
.guide-box > .body .create-box{
  margin: 10px 0;
  width: 100%;
}

.guide-box > .body .create:hover{
  cursor: pointer;
}

.guide-box > .body .path-box{
  display: flex;
  align-items: center;
}
.guide-box > .body .path-input-box{
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
/*.guide-box > .body .path-input-box .btn{*/
/*  margin-left: 10px;*/
/*}*/

.guide-box > .body .el-radio{
  margin-right:15px !important;
}


.body .title-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #e1e1e1;
}

.body .title-box .icon{
  margin-left: 4px;
}

.body .title-box .item-title {
  font-weight: bold;
}

</style>
